<!--医院端--退货管理--采购退货订单-->
<template>
  <div class="purchase-return">
    <el-container class="template-box">
      <!-- tab搜索 -->
      <tabs
        class="tabs-part"
        :tabs-arr="indexTabsArr"
        @returnIndex="tabsHandle" />
      <!-- 搜索 -->
      <el-header height="auto">
        <SearchForm
          label-width="140px"
          :data="indexSearchData"
          @searchForm="searchForm"
          :show-collapse='true'
          :compact-data='searchCompactData'
          :submit-loading='submitLoading'
        />
      </el-header>
      <!-- 列表 -->
      <el-editable
        v-loading="tableLoading"
        :data="tableData"
        height="400"
        :columns="columns"
      >
        <!-- 操作 -->
        <template
          slot="default-action"
          slot-scope="{ row }">
          <el-button
            size="small"
            type="text"
            @click="handleOperationRecordClick(row.id)">操作记录</el-button>
          <el-button
            size="small"
            type="text"
            @click="handleEditClick(row.id)">编辑</el-button>
          <!-- 配送方拒绝后 可显示 撤消 -->
          <el-button
            size="small"
            type="text"
            v-if="Object.is(row.orderStatus, 5)"
            @click="handleCancelClick(row.id)"
            :disabled="cancelButtonDisabled">撤消</el-button>
          <el-button
            size="small"
            type="text"
            @click="handleReturnClick(row.id)">退货</el-button>
          <el-button
            size="small"
            @click="handleJumpToDetail(row.id)"
            type="text">详情</el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <el-pagination
        align='right'
        style="margin-top: 10px;"
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="page.page"
        :page-sizes="PAGE_NUMBER"
        :page-size="page.size"
        :layout="PAGINATION_LAYOUT"
        :total="page.total"
      />
    </el-container>
    <dialog-operation-record
      :id='curRowId'
      :visible='dialogVisible'
      @closeDialog='closeDialog'/>
  </div>
</template>
<script>
import ElEditable from '@components/el-editable'
import Tabs from '@components/tabs/index.vue'
import paginationMixin from '@mixins/paginationMixin'
import SearchForm from '@components/businesscomponents/search'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import {
  returnList,
  cancelReturnOrder
} from '@const/beforeSettleApi'
import { indexSearchData, indexTableColumns as columns, indexTabsArr } from './const'
import DialogOperationRecord from '@/moduleComponents/beforeSettle/dialog-operation-record'
export default {
  mixins: [ paginationMixin ],
  components: { ElEditable, SearchForm, Tabs, DialogOperationRecord },
  data () {
    return {
      submitLoading: false,
      curRowId: '',
      dialogVisible: false,
      cancelButtonDisabled: false,
      // 搜索标题字段
      indexSearchData,
      searchCompactData: indexSearchData.slice(0, 2),
      // 搜索返回内容
      searchData: {},
      // 表格loading
      tableLoading: false,
      // 列表数据
      tableData: [],
      // 列表表头
      columns,
      // tab字段
      tabIndex: null,
      indexTabsArr,
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT // 页码功能布局
    }
  },
  created () {
    this.getItems()
  },
  methods: {// 获取列表
    getItems (page = this.page.page, pageSize = this.page.size, orderStatus = this.tabIndex) {
      this.tableLoading = true
      this.$axios.post(returnList, { ...this.searchData, orderStatus, page, pageSize })
        .then(({ data }) => {
          if (Number(data.code)) return
          this.tableData = data.payload.content || []
          this.page.total = data.payload.totalElements
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    // tabs切换处理事件
    tabsHandle (index) {
      const val = this.indexTabsArr[index].val
      this.tabIndex = Object.is(val, 'null') ? null : val
      this.pageReset()
    },
    // 点击操作记录
    handleOperationRecordClick (id) {
      this.$message.warning('没有提供接口呢')
      // this.curRowId = id
      // this.dialogVisible = true
    },
    handleEditClick (id) {
      this.$router.push({
        path: '/hospitalSide/newOrder/returnGoodsOrder',
        query: { id, type: 'edit' }
      })
    },
    // 撤消按钮逻辑
    handleCancelClick (id) {
      this.cancelButtonDisabled = true
      this.$axios.$post(cancelReturnOrder + `?id=${id}`)
        .then(({ code }) => {
          this.getItems()
          this.$message.success('撤消成功')
        })
        .finally(() => {
          this.cancelButtonDisabled = false
        })
    },
    closeDialog () {
      this.dialogVisible = false
    },
    // 点击退货按钮
    handleReturnClick (id) {
      this.$router.push({
        path: '/hospitalSide/returnOrderManage/purchaseReturnList/return',
        query: { id }
      })
    },
    // 跳转详情(根据ID)
    handleJumpToDetail (id) {
      this.$router.push({
        path: '/hospitalSide/returnOrderManage/purchaseReturnList/detail',
        query: { id }
      })
    },
    // 搜索功能-点击查询
    searchForm (condition) {
      this.searchData = condition
      this.pageReset()
    }
    // 搜索功能-点击重置
    // resetForm (condition) {
    //   this.searchData = condition
    // }
  }
}
</script>
<style lang="less" scope>
.purchase-return {
  .template-box {
    height: 100%;
    overflow: auto;
  }
}
</style>
